<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>工作空间</title>
    <jsp:include page="/WEB-INF/jsp/common/basic.jsp"></jsp:include>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/style/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugin/table/bootstrap-table.css">
  </head>

  <body class="sidebar-mini skin-red-light" style="height: auto; min-height: 100%;">
  <div class="wrapper" style="height: auto; min-height: 100%;">
  
  <!-- 头部 -->
  <jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
  
  
  <!-- 左边 -->
  <%@ include file="/WEB-INF/jsp/common/left.jsp" %>
 
 
   <!-- 内容区域 -->
  <div class="content-wrapper" style="min-height: 1126px;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
                    标签管理
        <small>标签列表</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Examples</a></li>
        <li class="active">Blank page</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
    <!-- 操作按钮 -->
   		 	<div class="box-body">
                <div class="row">
                  <form id="searchForm" action="" onsubmit="return false;">
                    <div class="col-xs-2">
                       <select class="form-control" name="key" id="query_key">
                        <option value="name">标签名称</option>                      
                       </select>
                    </div>
                    <div class="col-xs-2">
                      <input type="text" id="query_value" name="value" class="form-control" placeholder="关键字">
                    </div>
                    <div class="col-xs-2">
                       <button type="submit" class="btn bg-olive btn-flat">查询</button>
                    </div>
                  </form>
                </div>
              </div>
      <!-- 操作按钮 -->
      <div id="toolbar">
        <a href="${pageContext.request.contextPath}/admin/labels/add" type="button" class="btn bg-maroon btn-flat">添加</a>
        <button type="button" data-ope="delete" class="btn bg-olive btn-flat">删除</button>
        <button type="button" data-ope="edit" class="btn bg-orange btn-flat">编辑</button>
      </div>
      
      <table id="user_table"></table>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  
   <!-- 底部 -->
   <jsp:include page="/WEB-INF/jsp/common/bottom.jsp"></jsp:include>
   
   <!-- 设置 -->
   <jsp:include page="/WEB-INF/jsp/common/setting.jsp"></jsp:include>
  </div>


    <!-- SlimScroll -->
    <script src="${pageContext.request.contextPath}/static/plugin/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="${pageContext.request.contextPath}/static/plugin/fastclick/fastclick.js"></script>
    
    <!-- 引用表格插件 -->
    <script src="${pageContext.request.contextPath}/static/plugin/table/bootstrap-table.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugin/table/bootstrap-table-zh-CN.js"></script>

	<script>
		$(function() {
			$('.sidebar-menu').tree();
			var queryUrl = '${pageContext.request.contextPath}/admin/labels/list';
			$table = $('#user_table')
					.bootstrapTable(
							{
								url : queryUrl, //请求后台的URL（*）
								method : 'GET', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : true, //是否启用排序
								sortOrder : "asc", //排序方式

								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）

								pageNumber : 1, //初始化加载第一页，默认第一页,并记录
								pageSize : 10, //每页的记录行数（*）
								pageList : [ 10, 20, 30, 100 ], //可供选择的每页的行数（*）

								clickToSelect : true, //是否启用点击选中行
								uniqueId : "id", //每一行的唯一标识，一般为主键列

								//得到查询的参数
								queryParams : function(params) {
									//修改原来提交的参数名
									var temp = {
										pageNum : (params.offset / params.limit) + 1,
										sort : params.sort,
										sortOrder : params.order, //排位命令（desc，asc）
										limit : params.limit
									};
									return temp;
								},

								columns : [
										{
											checkbox : true,
											visible : true
										//是否显示复选框
										},{
											field : 'name',
											title : '标签名称'
										}, {
											field : 'topicscount',
											title : '标签帖子数量'
										}, {
											field : 'commentcount',
											title : '标签评论数量'
										}, {
											field : 'category.id',
											title : '所属版块'										
										}],
								responseHandler : function(res) {
									return {
										"total" : res.total,//总页数
										"rows" : res.rows
									//数据
									};
								}
							});

			//监听删除\编辑按钮
			$("#toolbar > button")
					.click(
							function() {
								//获取总的记录数  
								var idArray = $table
										.bootstrapTable('getAllSelections');
								if (idArray.length != 1) {
									alert("有且必须选中一条记录");
									return;
								}
								var ope = $(this).data("ope");
								if ("delete" == ope) {
									//删除
									//获取主键
									var id = idArray[0].id;

									$
											.ajax({
												type : "get",
												url : "${pageContext.request.contextPath}/admin/labels/delete/"
														+ id,
												success : function(msg) {
													//table
													$table
															.bootstrapTable('refresh');
												}
											})

								} else if ("edit" == ope) {
									//界面跳转
									window.location.href = "${pageContext.request.contextPath}/admin/labels/edit/"
											+ idArray[0].id + "";
								}
							});

			$("#searchForm").on("submit", function() {
				var param = $(this).serializeObject();
				if (param.key && param.value) {
					var key = param.key;
					var value = param.value;
					delete param['key'];
					delete param['value'];
					param[key] = value;
				}
				$table.bootstrapTable('refresh', {
					query : param
				});
				return false;
			});

		});
	</script>
</body>
</html>